import React from 'react'
import { Flex, Button, Modal } from 'antd-mobile'
import classNames from 'classnames'

import styles from './index.scss'

const Index = React.memo(({
  className,
  onNav,
  total,
  current
}) => {
  const showQuickJumpModal = React.useCallback(() => {
    Modal.prompt(
      '快速跳转',
      `当前正在第${current + 1}个题目, 总${total}个题目`,
      [
        { text: '返回' },
        {
          text: '跳转',
          onPress: value => onNav(value - 1, total)
        }
      ],
      'default',
      current
    )
  }, [total, current, onNav])

  return (
    <>
      <Flex
        justify='around'
        className={classNames(className, styles.fixBottomBar)}
      >
        <Flex.Item
          className={classNames(styles.fixBottomBarItem)}
        >
          <Button
            disabled={current === 0}
            onClick={() => onNav(current - 1, total)}
            type='primary'
            size='small'
          >上一题</Button>
        </Flex.Item>
        <Flex.Item
          className={classNames(styles.fixBottomBarItem)}
        >
          <div
            onClick={showQuickJumpModal}
            className={classNames(styles.fixBottomBarItemLable)}
          >
            <span
              className={classNames(styles.fixBottomBarItemLableSpecil)}
            >{current + 1}</span>
            <span> / </span>
            <span>{total}</span>
          </div>
        </Flex.Item>
        <Flex.Item
          className={classNames(styles.fixBottomBarItem)}
        >
          <Button
            disabled={current === total - 1}
            onClick={() => onNav(current + 1, total)}
            type='primary'
            size='small'
          >下一题</Button>
        </Flex.Item>
      </Flex>

      <div className={classNames({
        className: true,
        [styles.fixBottomBar]: true,
        [styles.fixBottomBarRelative]: true
      })} />
    </>
  )
})

export default Index
